<template>
  <div>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      
      <!-- 如果需要分页器 -->

      <div class="swiper-pagination"></div>

      <!-- <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div> -->
    </div> 
  </div>
</template>

<script>
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css";

export default {
  mounted() {
    new Swiper(".swiper", {
    //   navigation: {
    //     nextEl: ".swiper-button-next",
    //     prevEl: ".swiper-button-prev",
    //   },
      loop: true, // 循环模式选项

      autoplay: {
        delay: 2500,
        disableOnInteraction: false // 交互后是否继续循环
      },

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination'
      }

    });
  },
};
</script>

<style lang="scss" scoped>
.swiper{
    width: 23.4375rem;
    height: 12.5rem;
    background-color: aquamarine;
}
</style>
